<template>
	<view>
		<view class="track-title">发货信息</view>
		<u-tabs-swiper :show-bar="false" :active-color="themeColor" ref="tabs" :list="logisticsTab" :current="current"
			@change="onTabsChange" :is-scroll="false"></u-tabs-swiper>
		<view class="uni-tip-content" style="padding-top: 0;">
			<swiper :current="logTabIndex" class="swiper-area" duration="300" @change="changeLogTab">
				<swiper-item class="swiper-item" v-for="(item,index) in logisticsList"
					:key="index">
					<view class="swiper-scroll">
						
					<view class="c-line" v-if="item.isSupplierSplit">供应商子订单号：{{item.emallSn}}</view>
					<view class="c-line">发货方式：{{dictData[item.deliveryType]}}</view>
					<view class="c-line">发货商品：
						<text v-for="(product,pIndex) in item.detailList" :key="pIndex">
							{{product.orderItem.productName}} x {{product.num}}
							<text v-if="pIndex<item.detailList.length-1">、</text>
						</text>
					</view>
					<view class="c-line" v-if="item.deliveryType==='1'">物流公司：{{item.name}}</view>
					<view class="c-line" v-if="item.deliveryType==='1'">物流单号：{{item.sn}}
						<copy-button style='display: inline-flex;font-size: 13px;' :content="item.sn" />
					</view>
					<view class="p-line" v-if="item.deliveryType==='1'&&item.trackList.length>0">
						<view class="left-side">物流详情：</view>
						<view class="track-list">
							<view class="track-item" v-for="(track,tIndex) in item.trackList" :key='tIndex'>
								{{track.content}}
							</view>
						</view>
					</view>
					</view>
					<view v-if="!item.isConfirmReceipt" style="text-align: right;margin-top: 20rpx;">
					<u-button :custom-style="buttonStyle" size="mini" :ripple="true"
						shape="circle" @click="clickConfirm(item)">确认收货</u-button>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import CopyButton from '@/components/copy.vue'
	import {
		getThemeColor
	} from '../../common/utils/theme';
	export default {
		name: "order-track",
		components: {
			CopyButton
		},
		props: {
			logisticsTab: {
				type: Array,
				default: () => []
			},
			logisticsList: {
				type: Array,
				default: () => []
			},
			dictData: {
				type: Object,
				default: () => {}
			},
		},
		data() {
			return {
				current: 0,
				logTabIndex: 0,
				buttonStyle: {
					plain: true,
					// position: 'sticky',
					// right: 0,
					// bottom: 0,
					// float: 'right',
					color: getThemeColor()
				},
			};
		},
		methods: {
			// tab页切换函数
			onTabsChange(index) {
				this.logTabIndex = index
			},
			changeLogTab(e) {
				this.logTabIndex = e.target.current
				this.current = e.target.current
			},
			clickConfirm(item) {
				this.$emit('confirm',item)
			}
		}
	}
</script>

<style lang="scss">
	.track-title {
		text-align: center;
		font-weight: bold;
		font-size: 16px;
		color: #333;
		padding: 15px;
		border-bottom: 1px solid #e9e9e9;
	}
	
	.swiper-area{
		height: 500rpx;
		line-height: 38rpx;
		
		.swiper-item{
			display: flex;
			flex-direction: column;
			.swiper-scroll{
				flex: 1;
				height: 0;
				overflow-y:auto !important;
			}
		}
	}
</style>